<template>
  <el-select v-model="id" filterable :placeholder="placeholder" class="mb10" v-bind="$attrs">
    <el-option
      v-for="(item, index) in list"
      :key="index"
      :label="item[labelMap]"
      :value="item[idMap]">
    </el-option>
  </el-select>
</template>
<script>
  const LIST_ASYNC = 'oilsList'
  export default {
    props: {
      value: null,
      all: null, // 显示 选择全部选项
      allLabel: {
        type: String,
        default: '全部油品'
      },
      allValue: { // 选择全部选项默认值
        default: null
      },
      auto: { // 没有传值自动选择第一个
        type: Boolean,
        default: true
      },

      labelMap: { // 列的标题名
        type: String,
        default: 'name'
      },
      idMap: { // 列的id
        type: String,
        default: 'code'
      },
      placeholder: {
        type: String,
        default: '请选择油品'
      },
    },
    data() {
      return {}
    },
    computed: {
      list() {
        const list = this.$g[LIST_ASYNC].slice()
        this.all && list.unshift({[this.idMap]: this.allValue, [this.labelMap]: this.allLabel})
        return list
      },
      id: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    },
    watch: {
      list: {
        immediate: true,
        handler(list) {
          if (list.length === 0) return
          const itme = list.find(x => this.id == x[this.idMap])
          let result

          if (itme === undefined) {
            if (!this.auto) return
            result = list[0] && list[0][this.idMap]
          } else {
            result = itme[this.idMap]
          }
          this.id = result
        }
      }
    },
    methods: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
